<template>
  <div class="app_container">
    <NuxtLayout>
      <NuxtLoadingIndicator />
      <FullLoading v-show="isFullLoading" />
      <NuxtPage></NuxtPage>
    </NuxtLayout>
  </div>
</template>
<script setup lang="ts">
import { friendlyLink } from "~/api";

const isFullLoading = ref(true);
const { app, setMenus } = useApp();
const res = await friendlyLink();
const nuxtApp = useNuxtApp();
if (res.success) {
  setMenus(res.data);
}

useHead({
  titleTemplate(title) {
    return title ? `${title} -juejin` : "juejin";
  },
});

nuxtApp.hook("page:start", () => {
  isFullLoading.value = true;
  // console.log("page start");
});

nuxtApp.hook("page:finish", () => {
  isFullLoading.value = false;
  // console.log("page finish");
});

onMounted(() => {
  if (import.meta.client) {
    new window.WOW({
      boxClass: "wow",
      animateClass: "animated",
      offset: 20,
      mobile: true,
    }).init();
  }
});
</script>
<style>
/* .page-enter-active,
.page-leave-active {
  transition: all 0.4s;
}
.page-enter-from,
.page-leave-to {
  opacity: 0;
  filter: blur(1rem);
} */
.app_container {
}
.rotate-enter-active,
.rotate-leave-active {
  transition: all 0.4s;
}
.rotate-enter-from,
.rotate-leave-to {
  opacity: 0;
  transform: rotate3d(1, 1, 1, 15deg);
}
body {
  margin: 0;
}
</style>
